<template>
  <div class="search">
    <h1>巡更周报</h1>
    <hr style="border: 1px solid rgb(240, 240, 240)" />
    <span>选择星期</span>
    <el-date-picker
      v-model="time"
      type="week"
      format="[第] ww [周]"
      placeholder="请选择"
      style="margin-right: 30%"
    />
    <el-button type="primary" @click="get">查询</el-button>
    <el-button type="default" @click="reset">重置</el-button>
  </div>
  <div class="page">
    <div class="page-header">
      <span>记录列表</span>
    </div>
    <el-table v-loading="loading" :data="tableData" style="width: 100%">
      <el-table-column label="日期">
        <template #default="{ row }">
          {{ weekToDateM(row.date) }}~{{ weekToDateS(row.date) }}
        </template>
      </el-table-column>
      <el-table-column property="planPatrolTask" label="计划巡更任务" />
      <el-table-column property="onTimeComplete" label="按时完成" />
      <el-table-column property="timeoutComplete" label="超时完成" />
      <el-table-column property="timeoutNotComplete" label="超时未完成" />
      <el-table-column property="underway" label="进行中" />
      <el-table-column property="notStart" label="未开始" />
    </el-table>
    <div class="pagination">
      <el-pagination
        v-model:current-page="pageNum"
        v-model:page-size="pageSize"
        :page-sizes="[5, 10, 20]"
        style="margin-bottom: 2rem"
        background="true"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import axios from "axios";
import { dayjs, ElTable } from "element-plus";
import { onMounted, ref } from "vue";
import isoWeek from "dayjs/plugin/isoWeek";

dayjs.extend(isoWeek);

const loading = ref(false);

const time = ref("");
const pageNum = ref(1);
const pageSize = ref(10);
const total = ref(0);
const tableData = ref([]);

const reset = () => {
  time.value = "";
  get();
};

const handleSizeChange = (newSize) => {
  pageSize.value = newSize;
  get();
};

const handleCurrentChange = (newNum) => {
  pageNum.value = newNum;
  get();
};

const get = () => {
  const config = {
    url: "http://localhost:8080/patrolReport/weekly",
    method: "POST",
    headers: {
      Authorization: localStorage.getItem("token"),
    },
    data: {
      week:
        time.value === ""
          ? null
          : dayjs(time.value).add(1, "days").format("YYYYWW"),
      pageNum: pageNum.value,
      pageSize: pageSize.value,
    },
  };

  loading.value = true;
  const response = axios(config);
  response.then((data) => {
    total.value = data.data.data.total;
    tableData.value = data.data.data.records;
    loading.value = false;
  });
};

onMounted(() => {
  get();
});

const weekToDateM = (date) => {
  const year = Math.floor(date / 100);
  const week = date % 100;

  const firstDayOfYear = new Date(year, 0, 1);
  const dayOfWeek = firstDayOfYear.getDay();

  const offset = (week - 1) * 7 - dayOfWeek + 1;
  const targetDate = new Date(
    firstDayOfYear.setDate(firstDayOfYear.getDate() + offset)
  );

  const y = targetDate.getFullYear();
  const m = String(targetDate.getMonth() + 1).padStart(2, "0");
  const d = String(targetDate.getDate()).padStart(2, "0");

  return `${y}-${m}-${d}`;
};

const weekToDateS = (date) => {
  const year = Math.floor(date / 100); // 获取年份
  const week = date % 100; // 获取周数

  // 获取该年份的第一天
  const firstDayOfYear = new Date(year, 0, 1);
  const dayOfWeek = firstDayOfYear.getDay(); // 获取该年第一天是星期几（0=星期天，1=星期一，...）

  // 计算该周的第一天（周一）的偏移量
  const offset = (week - 1) * 7 - dayOfWeek + 1; // 计算该周周一的日期
  const targetDate = new Date(
    firstDayOfYear.setDate(firstDayOfYear.getDate() + offset)
  );

  // 计算该周的星期日（+6天）
  const sundayDate = new Date(targetDate);
  sundayDate.setDate(targetDate.getDate() + 6); // 加上6天，得到星期天

  // 格式化为 YYYY-MM-DD
  const y = sundayDate.getFullYear();
  const m = String(sundayDate.getMonth() + 1).padStart(2, "0");
  const d = String(sundayDate.getDate()).padStart(2, "0");

  return `${y}-${m}-${d}`; // 返回星期日的日期
};
</script>

<style scoped>
.search {
  background-color: white;
  padding-bottom: 2rem;
  height: auto;
  margin-top: 2rem;
}

h1 {
  font-size: 2rem;
  font-weight: 600;
  padding: 2rem 0 10px 4rem;
}

span {
  display: inline-block;
  font-size: 15px;
  margin-top: 2rem;
  margin-left: 3rem;
  margin-right: 1rem;
  height: 24px;
}

.page {
  background-color: white;
  height: auto;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pagination {
  display: flex;
  margin-top: 2rem;
  justify-content: center;
}
</style>
